<template>
    <view class="cu-form-group">
    	<view class="title">{{label}}</view>
    	<picker @change="PickerChange" :value="index" :range="picker" :range-key="keyname">
    		<view class="picker">
    			{{index>-1?picker[index][keyname]:placeholder}}
    		</view>
    	</picker>
    </view>
</template>

<script>
    export default {
        name: "sentity",
        props: {
            value: '',
			model:'',
			label:'',
			placeholder:'',
			condtion:'',
			keyname:{
				default:'name'
			}
        },
        data() {
            return {
                picker: [],
                index: -1
            }
        },
        methods: {
            PickerChange(e) {
				// if(this.index === -1){this.index = 0}else{this.index = e.detail.value}
				this.index = e.detail.value
				this.$emit('input',this.picker[this.index].id)
            },
			reload(){
				let condtion = {}
				if(this.$com.isbool(this.condtion)){
					condtion = this.condtion
				}
				this.$api.get("/ez/api/" + this.model ,condtion,(res)=>{
					this.picker = res.d
					if(this.$com.isbool(this.value)){
						this.picker.map((data,index)=>{
							if(data.id === this.value){this.index = index}
						})
					}
				})
			}
        },
        mounted() {
			this.reload()
        },
		watch:{
			value(curVal,oldVal){
				console.log('value')
				if(this.$com.isbool(curVal)){
					this.picker.map((data,index)=>{
						if(data.id === curVal){this.index = index}
					})
				}
			},
			index(curVal,oldVal){
				console.log('index')
				if(this.$com.isbool(curVal)){
					this.picker.map((data,index)=>{
						// if(data.id === curVal){this.index = index}
					})
				}
			},
			condtion(curVal){
				console.log('condtion')
				this.reload()
			}
		}
    }
</script>

<style>
    .cu-form-group .title {
    	min-width: calc(4em + 15px);
    }
	.uni-picker-item{
		text-align: left!important;
	}
</style>
